<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例演示</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>

<body>
    <div style="padding:18px 12px">
        <div id="test_datatable_filter"></div>
    </div>

    <script src="./layui/layui.js"></script>
    <script>
        layui.config({
            base: './plugin/', //静态资源所在路径
            dir: './plugin/'
        }).use(['dataTable'], function() {
            let dataTable = layui.dataTable;
            dataTable.render({
                el: "#test_datatable_filter",
                form: {
                    lay_filter: 'table-search',
                    btn: [{
                        name: '导出',
                        lay_filter: 'test',
                        url: 'test',
                        method: 'POST',
                        query: {
                            is_export: 1
                        }
                    }]
                },
                filter: {
                    fields: [{
                        label: '用户信息',
                        children: [{
                            type: 'input',
                            label: '用户名',
                            field: 'username',
                            children: []
                        }, {
                            type: 'input',
                            label: '手机号',
                            field: 'phone',
                            children: []
                        }]
                    }, {
                        label: '订单信息',
                        children: [{
                            type: 'input',
                            label: '订单编号',
                            field: 'order_sn',
                            children: []
                        }, {
                            type: 'input',
                            label: '订单ID',
                            field: 'order_id',
                            children: []
                        }]
                    }, {
                        label: '下拉框',
                        children: [{
                            type: 'select',
                            label: '下拉框1',
                            field: 'order_sn',
                            data: [{
                                value: '1',
                                title: '待付款'
                            }, {
                                value: '2',
                                title: '已付款'
                            }, {
                                value: '3',
                                title: '待发货'
                            }, {
                                value: '4',
                                title: '已发货'
                            }, {
                                value: '5',
                                title: '已取消'
                            }, {
                                value: '6',
                                title: '已完成'
                            }, ]
                        }, {
                            type: 'select',
                            label: '下拉框2',
                            field: 'order_id',
                            data: [{
                                value: '1',
                                title: '待付款'
                            }, {
                                value: '2',
                                title: '已付款'
                            }, {
                                value: '3',
                                title: '待发货'
                            }, {
                                value: '4',
                                title: '已发货'
                            }, {
                                value: '5',
                                title: '已取消'
                            }, {
                                value: '6',
                                title: '已完成'
                            }, ]
                        }]
                    }, {
                        label: '单(多)选',
                        children: [{
                            type: 'radio',
                            label: '单选',
                            field: 'order_sn',
                            data: [{
                                value: '1',
                                title: '待付款'
                            }, {
                                value: '2',
                                title: '已付款'
                            }, ]
                        }, {
                            type: 'checkbox',
                            label: '多选',
                            field: 'order_id',
                            data: [{
                                value: '1',
                                title: '待付款'
                            }, {
                                value: '2',
                                title: '已付款'
                            }, {
                                value: '3',
                                title: '待发货'
                            }, ]
                        }]
                    }, {
                        label: '商品信息',
                        field: 'product',
                        type: 'input'
                    }, {
                        label: '下单时间',
                        field: 'order_time',
                        type: 'date_range'
                    }, {
                        label: '订单状态',
                        field: 'order_status',
                        type: 'checkbox',
                        data: [{
                            value: '1',
                            title: '待付款'
                        }, {
                            value: '2',
                            title: '已付款'
                        }, {
                            value: '3',
                            title: '待发货'
                        }, {
                            value: '4',
                            title: '已发货'
                        }, {
                            value: '5',
                            title: '已取消'
                        }, {
                            value: '6',
                            title: '已完成'
                        }, ]
                    }, {
                        label: '单选',
                        field: 'order_status',
                        type: 'radio',
                        data: [{
                            value: '1',
                            title: '待付款'
                        }, {
                            value: '2',
                            title: '已付款'
                        }, {
                            value: '3',
                            title: '待发货'
                        }, {
                            value: '4',
                            title: '已发货'
                        }, {
                            value: '5',
                            title: '已取消'
                        }, {
                            value: '6',
                            title: '已完成'
                        }, ]
                    }, ]
                },
                table: {
                    elem: '#test',
                    url: '{:url("inputTable")}',
                    cols: [
                        [{
                            field: 'id',
                            width: 80,
                            title: 'ID',
                            sort: true
                        }, {
                            field: 'username',
                            width: 80,
                            title: '用户名'
                        }, {
                            field: 'sex',
                            width: 80,
                            title: '性别',
                            sort: true
                        }, {
                            field: 'city',
                            width: 80,
                            title: '城市'
                        }, {
                            field: 'sign',
                            title: '签名',
                            minWidth: 150
                        }, {
                            field: 'experience',
                            width: 80,
                            title: '积分',
                            sort: true
                        }, {
                            field: 'score',
                            width: 80,
                            title: '评分',
                            sort: true
                        }, {
                            field: 'classify',
                            width: 80,
                            title: '职业'
                        }, {
                            field: 'wealth',
                            width: 135,
                            title: '财富',
                            sort: true
                        }]
                    ],
                    page: true
                },
                table_action: [{}]
            })
        })
    </script>
</body>

</html>